<template>
  <!--雇主显示页面-->
  <div class="box" v-if="role=='employer'">
    <h1>你好，{{ userName }}！</h1>
    <p>很高兴再次遇见你！</p>
    <div style="margin-top: 30px">
      <div class="box1 clearfix">
        <p>总发布任务</p>
        <p>{{ taskListLength }}</p>
        <div class="container">
          <i class="el-icon-s-order"></i>
        </div>
      </div>
      <div class="box2">
        <p>总任务投标人数</p>
        <p>{{count}}</p>
        <div class="container">
          <i class="el-icon-s-custom"></i>
        </div>
      </div>
    </div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><i class="el-icon-message-solid"></i>最近提交的任务</span>
      </div>
      <div >
        <el-table
          :data="taskList"
          style="width: 100%">
          <el-table-column
            prop="title"
            label="任务名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="类型"
            width="180">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.status === 0">不通过</span>
              <span v-else-if="scope.row.status === 1">审核中</span>
              <span v-else-if="scope.row.status === 2">进行中</span>
              <span v-else-if="scope.row.status === 3">已完成</span>
              <span v-else-if="scope.row.status === 4">进行中</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="expectedPrice"
            label="成交价格">
            <template slot-scope="scope">
              <span v-if="scope.row.transactionPrice === null">暂无</span>
              <span v-else>{{scope.row.transactionPrice}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="releaseTime"
            label="发布时间">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
<!--雇员显示页面-->
  <div class="box" v-else-if="role=='employee'">
    <h1>你好，{{ userName }}！</h1>
    <p>很高兴再次遇见你！</p>
    <div style="margin-top: 30px">
      <div class="box1 clearfix">
        <p>总任务投标中标</p>
        <p>{{bidCount==null?0:bidCount}}</p>
        <div class="container">
          <i class="el-icon-position"></i>
        </div>
      </div>
      <div class="box2">
        <p>成交总金额</p>
        <p>{{priceSum==null?0:priceSum}}</p>
        <div class="container">
          <i class="el-icon-medal-1"></i>
        </div>
      </div>
    </div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><i class="el-icon-message-solid"></i>最近完成的任务</span>
      </div>
      <div >
        <el-table
          :data="taskListTask"
          style="width: 100%">
          <el-table-column
            prop="title"
            label="任务名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="类型"
            width="180">
          </el-table-column>
          <el-table-column
            prop="transactionPrice"
            label="成交价格">
            <template slot-scope="scope">
              <span v-if="scope.row.transactionPrice === null">暂无</span>
              <span v-else>{{scope.row.transactionPrice}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="employerName"
            label="雇主">
          </el-table-column>
          <el-table-column
            prop="transactionTime"
            label="成交时间">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
<!--管理员-->
  <div class="box" v-else-if="role=='administrator'">
    <h1>你好，{{ userName }}！</h1>
    <p>很高兴再次遇见你！</p>
    <div style="margin-top: 30px">
      <div class="box1 clearfix">
        <p>雇主人数</p>
        <p>{{employerCount}}</p>
        <div class="container">
          <i class="el-icon-user"></i>
        </div>
      </div>
      <div class="box2">
        <p>雇员人数</p>
        <p>{{employeeCount}}</p>
        <div class="container">
          <i class="el-icon-user"></i>
        </div>
      </div>
    </div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span><i class="el-icon-message-solid"></i>最近注册的用户</span>
      </div>
      <div >
        <el-table
          :data="recentlyUser"
          style="width: 100%">
          <el-table-column
            prop="userName"
            label="用户名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="signature"
            label="个性签名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="phonenumber"
            label="电话">
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="注册时间">
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import {getPriceSum, listTask} from "@/api/system/task";
import {getBidCount, listBid} from "@/api/system/bid";
import task from "@/views/system/task/index.vue";
import {getIdentifier} from "@/api/system/user";

export default {
  name: 'Index',
  computed: {
    task() {
      return task
    }
  },
  data() {
    return {
      userName:this.$store.state.user.name,
      role: [],
      taskList:[],
      taskListTask:[],
      taskListLength:null,
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        employerId: this.$store.state.user.id
      },
      queryParamsMyCompleteTask: {
        pageNum: 1,
        pageSize: 5,
        employeeId: this.$store.state.user.id
      },
      count:null,
      bidCount:null,
      priceSum:null,
      employerCount:0,
      employeeCount:0,
      recentlyUser:[],
    }
  },
  created() {
   this.role = this.$store.state.user.roles
    if(this.role=='administrator'){
      this.getEmployerCount()
      this.getEmployeeCount()
      this.getRecentlyUser()
    }
    if(this.role=='employer'){
      this.getListCount()
      this.getBidCount()
      this.getList()
    }
    if(this.role=='employee'){
      this.getPriceSum()
      this.getListTask()
      this.getBidListCount()
    }
  },
  methods: {
    //得到雇主人数
    getEmployerCount(){
      getIdentifier(3).then(response => {
        this.employerCount = response.rows.length;
      });
    },
    //得到雇主人数
    getEmployeeCount(){
      getIdentifier(5).then(response => {
        this.employeeCount = response.rows.length;
      });
    },
    //得到最近注册的用户
    getRecentlyUser(){
      getIdentifier(4).then(response => {
        this.recentlyUser = response.rows
      });
    },
    //总发布任务
    getListCount() {
      listTask({employerId: this.$store.state.user.id}).then(response => {
        this.taskListLength = response.rows.length;
      });
    },
    //雇主最近提交的任务
    getList() {
      listTask(this.queryParams).then(response => {
        this.taskList = response.rows;
      });
    },
    getPriceSum() {
      getPriceSum(this.$store.state.user.id).then(response => {
        this.priceSum = response;
      });
    },
    //雇员最近完成的任务
    getListTask() {
      listTask(this.queryParamsMyCompleteTask).then(response => {
        this.taskListTask = response.rows;
      });
    },
    //总任务投标人数
    getBidCount() {
      getBidCount(this.$store.state.user.id).then(response => {
        this.count = response
      });
    },
    //总任务投标中标
    getBidListCount() {
      listBid({employeeId:this.$store.state.user.id}).then(response => {
        this.bidCount = response.total
      });
    },
  }
}
</script>

<style scoped>
.box {
  margin: auto;
  width: 100%;
  height: 100%;
  padding: 4%;
  box-sizing: border-box;
}
h1{
  margin-left: 10px;
}
p{
  margin-left: 10px;
}
.box1 {
  background-color: #f5f8f8;
  width: 43%;
  float: left;
  position: relative; /* 保持相对定位以便子元素可以使用绝对定位 */
}

.container {
  position: absolute; /* 使用绝对定位来脱离文档流，并相对于.box1定位 */
  right: 1%; /* 靠右 */
  top: 50%; /* 顶部对齐到.box1的中心 */
  transform: translateY(-50%); /* 垂直居中 */
  display: flex; /* 作为一个flex容器 */
  align-items: center; /* 垂直居中图标 */
  justify-content: flex-end; /* 水平靠右对齐图标 */
}
.el-icon-s-order {
  font-size: 38px;
  color: rgba(34, 225, 196, 0.86);
}
.el-icon-s-custom{
  font-size: 38px;
  color: rgba(34, 225, 196, 0.86);
}
.el-icon-medal-1{
  font-size: 38px;
  color: rgba(34, 225, 196, 0.86);
}
.el-icon-position{
  font-size: 38px;
  color: rgba(34, 225, 196, 0.86);
}
.el-icon-user{
  font-size: 38px;
  color: rgba(34, 225, 196, 0.86);
}
.el-icon-message-solid{
  margin-right: 10px;
  color: #1c84c6;
}

.box2 {
  background-color: #f5f8f8;
  margin-left: 3%;
  width: 43%;
  float: left;
  position: relative;
}
，box3{
  margin-top: 20px;
  width: 100%;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  margin-top: 20px;
  width: 89%;
}
</style>
